<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>当当图书网</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
                font-family: Verdana 宋体；
            }
            .all{
                width: 960px;
                margin: 0px auto;
            }
            .top{
                overflow: hidden;
                margin-top: 10px;
/*                border: 1px solid red;*/
                position: relative;
            }
            .logo{
                float: left;
                
            }
            .top_right{
                float: right;
                
            }
/*
            li{
                display: inline-block;
                list-style-type: none;
                background: #eafffa;
                
            }
*/
            .maopao{
                background: #eafffa;
                font-size: 12px;
                padding: 6px 10px;
                box-sizing: border-box;
                margin-top: 22px;
            }
            .maopao span a{
                color: #7b7b7b;
                text-decoration: none;
            }
            .maopao .kong{
                margin-left: 10px;
            }
            .fengqiang{
                position: absolute;
                right: 174px;
                bottom: 20px;
            }
            .pailie{
                
                list-style-type: none;
            }
            li{
                display: inline-block;
                font-size: 14px;
                line-height: 36px;
                height: 36px;
                margin-left: 12px;
                margin-right: 12px;
                text-align: justify;
            }
            li a{
                color: #ffffff;
                text-decoration: none;
            }
            li a:hover{
                color: #ffffff;
                text-decoration: underline;
                
            }
            
            .nav{
                background: url(menuBg.jpg) repeat;
                margin-top: 4px;
            }
            .content{
                margin-top: 10px;
            }
            .book{
                border: 2px solid #cce9ac;
                box-sizing: border-box;
                margin-top: 16px;
            }
            .book1{
                float: left;
            }
            .jieshao1{
                float: left;
                width: 300px;
            }
            .left{
                overflow: hidden;
                float: left;
/*                width: 480px;*/
            }
            .right{
                float: left;
            }
            .books_name1{
                
                
                line-height: 26px;
                height: 26px;
            }
            .books_name1 .zc{
                font-size: 12px;
                color: #000000;
            }
            .books_name1 a{
                
                color: #1a66b3;
                text-decoration: none;
            }
            .books_name1 .bs{
                font-size: 14px;
            }
            .books_name1 span,.books_name2 .jiage1{
                color: #8e112b;
            }
            .books_name2{
                font-size: 12px;
                color: #000000;
                line-height: 26px;
                height: 26px;
            }
            .zhekou1{
                color: #5ea593;
            }
            .books_name2 .bs{
                font-size: 14px;
                
            }
            .books_name2 a{
                color: #1a66b3;
                text-decoration: none;
            }
            .book2{
                float: left;
            }
            .jieshao2{
                float: left;
            }
            .clearfix:after{
                display: table;
                clear: both;
                content: "";
            }
            .right-bottom{
                margin-top: 130px;
            }
            .book{
                padding-top: 80px;
                padding-bottom: 10px;
            }
            .content{
                position: relative;
            }
            .chaogxiao{
                position: absolute;
                top: 140px;
                left: -10px;
            }
            .biaoqian1{
                position: absolute;
                top: 200px;
                left: 22px;
            }
            .biaoqian2{
                position: absolute;
                top: 200px;
                left: 562px;
            }
            .biaoqian3{
                position: absolute;
                top: 330px;
                left: 562px;
            }
            .foot span{
                font-size: 12px;
                color: #848484;
            }
            .foot{
                text-align: center;
                margin-top: 10px;
            }
            .foot img{
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="all">
            <div class="top">
                <div class="logo"><img src="logo.jpg" /></div>
                <div class="top_right clearfix">
                    <p class="maopao">
                        <span><a href="#">尾品汇</a></span>
                        <span class="kong"><a href="#">当当优品</a></span>
                        <span class="kong"><a href="#">数字馆</a></span>
                        <span class="kong"><a href="#">都看阅器</a></span>
                    </p>
                </div>
                <div class="fengqiang"><img src="icon_count.png" /></div>
            </div>
            <div class="nav">
                <ul class="pailie">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">图书</a></li>
                    <li><a href="#">音像</a></li>
                    <li><a href="#">童装</a></li>
                    <li><a href="#">服装</a></li>
                    <li><a href="#">鞋靴</a></li>
                    <li><a href="#">运动</a></li>
                    <li><a href="#">箱包</a></li>
                    <li><a href="#">美妆</a></li>
                    <li><a href="#">珠宝</a></li>
                    <li><a href="#">家居</a></li>
                    <li><a href="#">食品</a></li>
                    <li><a href="#">酒</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">数码</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">家电</a></li>
                </ul>
            </div>
            <div class="content">
                <div class="banner"><img src="banner.png" /></div>
                <div class="book clearfix">
                    <div class="left">
                        <div class="book1"><a href="#"><img src="book-01.jpg" /></a></div>
                        <div class="jieshao1">
                            <div class="books_name1"><span class="bs"><a href="#">偷影子的人</a></span><br />
                            <span class="zc">作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译<br />

出版社：湖南文艺出版社<br />

当当价：<span>￥ 17.90</span><br />

不知道姓氏的克蕾儿。这就是你在我生命里的角色，<br />我童年时的小女孩，今日蜕变成了女人，一段青梅竹<br />马的回忆，一个时间之神没有应允的愿望。 一个老是<br />受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能<br />力而强大：他能“偷别人的影子”，因而能看见他</span>

</div>
                            
                        </div>
                    </div>
                
                <div class="right">
                    <div class="right-top">
                        <div class="book2"><a href="#"><img src="book-02.jpg" /></a></div>
                        <div class="jieshao2">
                            <div class="books_name2">
<span class="bs"><a href="#">看见(央视知名记者、主持人柴静：十年个人<br />成长的告白，中国社会变迁的备忘 </a></span><br />
<span class="zc">作 者：柴静 著<br />

出版社：广西师范大学出版社<br /></span>

                                <span class="jiage1">￥ 29.40</span> &nbsp;&nbsp;<span class="zhekou1">7.4折</span></div>
                        </div>
                    </div>
                    <div class="right-bottom">
                        <div class="book2"><a href="#"><img src="book-03.jpg" /></a></div>
                        <div class="jieshao2">
                            <div class="books_name2">
<span class="bs"><a href="#">改变孩子先改变自己</a></span><br />
<span class="zc">作 者：贾容韬 贾毅 著<br />

出版社：作家出版社<br /></span>

                                <span class="jiage1">￥ 22.20</span> &nbsp;&nbsp;<span class="zhekou1">7.4折</span></div>
                        </div>
                    </div>
                </div>
                <div class="chaogxiao"><img src="bg_bang.gif" /></div>
                <div class="biaoqian1"><img src="bookNo1.gif" /></div>
                <div class="biaoqian2"><img src="bookNo2.gif" /></div>
                <div class="biaoqian3"><img src="bookNo3.gif" /></div>
                </div>
            </div>
            <div class="foot">
                <p><span>Copyright (C) 当当网 2004-2017, All Rights Reserved</span><img src="validate.gif" /><span>京ICP证041189号出版物经营许可证 新出发京批字第直0673号</span></p>
            </div>
        </div>
    </body>
</html>